<template>
	<view>
		<div style="height:60rpx;background-color: #fff;"></div>
		<Title :title="title" style="background-color: #fff;" />
		<u--form
			:model="serviceModel"
			:rules="rules"
			ref="serviceForm"
			class="ml-20 mr-20 formSty"
		>
		<view class="topBg">
			<u-form-item
				:label="$t('订单编号')"
				prop="delivery_id"
				ref="item1"
				labelWidth="150"
				class="inputSty pl-15 mt-16 h-95"
			>
				<u--input
					v-model="orderNo"
					disabled
					disabledColor="#ffffff"
					border="none"
					class="mr-20 text-333 font-bold"
				></u--input>
			</u-form-item>
		</view>
			<view class="contentBg">
				<p class="titleSty pt-40 pb-24">{{$t('商家')}}</p>
				<u-form-item
					prop="service_user_id"
					border
					ref="business"
				>
				<!-- <u--input
				    border="none"
					:disabled="true"
				    v-model="userNmae"
					class="businessSty"
				  ></u--input> -->
				  
				  <u--textarea 
				    border="none"
					:disabled="true"
				    v-model="userNmae"
					class="businessSty"
				  	autoHeight ></u--textarea>
				</u-form-item>
				<p class="titleSty mt-44">{{$t('评分')}}</p>
				<u-form-item
					prop="score"
					border
					ref="scoreNum"
				>
				<!-- <view class="scoreBox"> -->
					<view class="flex-start starSty" v-for="(item, index) in scoreList" @click="checkStar(item,index)">
						<image v-if = "item.checked" class="ml-45 mt-16 w-50 h-50" src="/static/img/starBright.png"></image>
						<image v-if = "!item.checked" class="ml-45 mt-16 w-50 h-50" src="/static/img/starDark.png"></image>
					</view>
					<p class="scoreNumSty">{{serviceModel.score}}</p>
				<!-- </view> -->
				</u-form-item>
				
				<p class="titleSty mt-44">{{$t('评价')}}</p>
				<u-form-item
					prop="brand_id"
					border
					ref="advanCheckList"
					class="advanBoxSty"
				>
					<button
						v-for="(item, index) in advantageList"
						:class="{common: item.checked == true || item.checked == false, checkedSty: item.checked == true}"
						@click="advanCheck(item, index)"
					>
						{{item.text}}
					</button>
				</u-form-item>
				<u-form-item
					prop="content"
					ref="content"
				>
					<u--textarea v-model="serviceModel.content" class="textareaSty"></u--textarea>
				</u-form-item>
				<u-form-item
					prop="service.file"
					ref="file"
				>
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
						width="150"
						height="150"
						class="mt-20 uploadSty"
					  ></u-upload>
				</u-form-item>
					<!-- <p class="titleSty pt-40 pb-24">{{$t('商家')}}</p>
					<u-form-item
						prop="service.business2"
						border
						ref="business2"
					>
					<u--input
					    border="none"
					    v-model="serviceModel.service.business2"
						class="businessSty"
					  ></u--input>
					</u-form-item> -->
			
			</view>
		</u--form>
		<view class="empty"></view>
		<view class="footer_btn4">
			<u-button class="btn_blue" :disabled="btnDis" @click="submit">
				{{$t('提交')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { submitEvaluate } from '@/api/order.js'
	
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('服务评价'),
				badInfo: this.$t('货物损坏'),
				btnDis: false,
				orderNo: '',
				scoreList: [{
					num:"1.0",
					checked: false
					},
					{
					num:"2.0",
					checked: false
					},
					{
					num:"3.0",
					checked: false
					},
					{
					num:"4.0",
					checked: false
					},
					{
					num:"5.0",
					checked: false
					},
				],
				advantageList: [
					{
						text: this.$t('服务好'),
						key: '28' ,
						checked: false
					},
					{
						text: this.$t('响应快'),
						key: '29',
						checked: false
					},
					{
						text: this.$t('效率高'),
						key: '30',
						checked: false
					}
				],
				show: false,
				fileList1: [],
				fileList: [],
				fileListUp: [],
				columns: [
					[this.$t('货物损坏'), this.$t('运输过慢'), this.$t('包装劣质')]
				],
				advanCheckList: [],
				userNmae: '',
				serviceModel: {
					user_id: uni.getStorageSync("user_id"),
					delivery_id: '', 
					service_user_id: '',
					score: 0,
					brand_id: "",
					content: ''
				},
				rules: {
					'score': {
						type: 'string',
						required: true,
						message: this.$t('请选择评分'),
						trigger: ['change']
					},
					'content': {
						type: 'string',
						required: true,
						message: this.$t('请输入评价'),
						trigger: ['change']
					},
					'images': {
						type: 'string',
						required: true,
						message: this.$t('请输入评价'),
						trigger: ['change']
					},
				},
				showSex: false
			}
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
			console.log('this.allInfo-', this.allInfo)
			this.serviceModel.delivery_id = this.allInfo.id
			this.serviceModel.service_user_id = this.allInfo.cooperate.id
			this.userNmae = this.allInfo.cooperate.username
			this.orderNo = this.allInfo.order_no
		},
		methods: {
				submit() {
					this.$refs.serviceForm.validate().then(res => {
						this.btnDis = true
						uni.showLoading({
							title: this.$t('提交中'),
							mask: true
						});
						this.fileList1.map(item => {
							this.fileListUp.push(item.url)
						})
						submitEvaluate({
							user_id: uni.getStorageSync("user_id"),
							delivery_id: this.allInfo.id,
							evaluate: [{
									...this.serviceModel,
									images: this.fileListUp.join(',')
								}]
							}).then(res => {
							if(res.data.code == 200) {
								uni.$u.toast('提交成功')
								uni.navigateTo({
									url:'/pages/shipmentRecord/index?index=4'
								})
								uni.hideLoading()
								// this.btnDis = false
							}
						})
					}).catch(errors => {
						uni.$u.toast(this.$t('请检查是否有未填写字段'))
					})
				},
				back() {
					// uni.navigateBack()
					this.cback()
				},
				// 星星{{$t('选择')}}
				checkStar(item,index) {
					this.serviceModel.score = item.num
					for (const check in this.scoreList) {
						if (check <= index) {
							this.scoreList[check].checked = true
						} else {
							this.scoreList[check].checked = false
						}
					}
				},
				// 售后诉求选择
				advanCheck(item, index) {
					for (const check in this.advantageList) {
						if (check == index) {
							this.advantageList[check].checked = !item.checked
							if(this.advanCheckList.indexOf(item.key) == -1) {
								this.advanCheckList.push(item.key)
							} else {
								this.advanCheckList = this.advanCheckList.filter(del => del !== item.key)
							}
						}
					}
					this.serviceModel.brand_id = this.advanCheckList.join(',')
				},
				sexSelect(e) {
					this.model1.order.name = e.name
					this.$refs.uForm.validateField('order.name')
				},
				 async afterRead(event) {
		             // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					console.log('000===1111222', event)
		             let lists = [].concat(event.file)
		             let fileListLen = this[`fileList${event.name}`].length
		             lists.map((item) => {
		                 this[`fileList${event.name}`].push({
		                     ...item,
		                     status: 'uploading',
		                     message: $t('上传中')
		                 })
		             })
					console.log('90--=====', lists)
		             for (let i = 0; i < lists.length; i++) {
		                 const result = await this.uploadFilePromise(lists[i].url)
		                 let item = this[`fileList${event.name}`][fileListLen]
		                 this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
		                     status: 'success',
		                     message: '',
		                     url: result
		                 }))
		                 fileListLen++
		             }
		         },
		         uploadFilePromise(url) {
		             return new Promise((resolve, reject) => {
		                 let a = uni.uploadFile({
		                     url: 'https://app.gluz.com.cn/api/common/upload',
		                     filePath: url,
		                     name: 'file',
		                     formData: {
		                         user: 'test'
		                     },
							header: {
								'xzdToken': uni.getStorageSync('cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status'),
								'version': uni.getStorageSync('1.0.0'),
								'lang': uni.getStorageSync('zh'),
								'Authorization': 'Bearer ' + uni.getStorageSync('cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status') // 在这里添加token
							},
		                     success: (res) => {
		                         const data = JSON.parse(res.data)
								// this.fileListUp.push(data.data.fullurl)
								console.log('--===', data)
		                         resolve(data.data.url)
		                     }
		                 });
		             })
		         },
				 deletePic(event) {
					this[`fileList${event.name}`].splice(event.index, 1);
				  },
		}
	}
</script>

<style lang="less">
	page {
			background: #F6F7FB;
		}
		
		.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			// margin-top: 40rpx;
		}
		.advanBoxSty {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow-x: auto;
			margin-top: 24rpx;
			.common {
				width: 168rpx;
				height: 64rpx;
				flex: 0 0 auto;
				border-radius: 500rpx;
				background: #F7F7F7;
				color: #333;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: center;
				margin-left: 20rpx;
			}
			.common:first-child {
				margin-left: 0;
			}
			.checkedSty {
				border: 1rpx solid #278AFF;
				background: #D7E9FF;
				color: #278AFF;
				font-weight: 600;
			}
		}
		.scoreNumSty {
			color: #FF7E17;
			margin-left: 60rpx;
			font-family: "PingFang SC";
			font-size: 60rpx;
			font-style: normal;
			font-weight: 600;
			margin-top: 10rpx;
		}
		.inputSty {
			border-radius: 18rpx;
			background-color: #fff;
			line-height: 95rpx;
			e-input {
				float: right;
			}
			/deep/ .uni-input-input {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		/deep/ .u-form-item__body__left__content__label {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
		}
			uni-button:after {
				border: none;
			}
			.formSty {
				// padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				margin-top: 24rpx;
				border-radius: 18px;
				padding-bottom: 34rpx;
				/deep/ .u-icon__icon {
					font-size: 60rpx !important;
				}
			}
			.topBg {
				background-color: #fff;
				padding: 0 16rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.uploadSty {
				/deep/ .u-upload__button {
					border-radius: 16rpx;
				}
			}
			.textareaSty {
				height: 226rpx;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
				text-indent: 18rpx;
				/deep/ .u-textarea__field{
					color: #333;
					font-size: 26rpx;
				}
			}
			.businessSty {
				min-height: 80rpx;
				border-radius: 18rpx;
				background: #F7F7F7;
				color: #333;
				font-family: "PingFang SC";
				font-style: normal;
				font-weight: 400;
				// margin-top: 24rpx;
				// text-indent: 24rpx;
				/deep/ .u-input__content__field-wrapper__field {
					font-size: 26rpx !important;
				}
			}
			
			.badBtn {
				height: 80rpx;
				border-radius: 18px;
				background: #F7F7F7;
				display: flex;
				justify-content: space-between;
			}
		.header {
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			padding-top: var(--status-bar-height);
		}
		.back {
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			top: 15rpx;
		}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 98%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
</style>
